<template>
  <section class="main">
    <div class="slide_container center-content">
      <el-carousel :interval="5000" arrow="always" height="7.2rem"  class="carousel">
        <el-carousel-item v-for="(banner, index) in this.backgroundDiv" :key="'indexBanner'+index">
          <h3 class="carousel-item pointer" :style="banner" @click="toArticleDetailLink(bannerList[index].imgDetail,bannerList[index].isUrl)">
          </h3>
        </el-carousel-item>
      </el-carousel>

      <div class="date-panel">
        <div class="end-date-panel">
          <div class="title">本次报名截止日期</div>
          <div class="content">
            <div class="yellow-panel">{{endDate.month}}</div>
            <label class="text" style="margin-right: 15px;">月</label>
            <div class="yellow-panel">{{endDate.day}}</div>
            <label class="text">日</label>
          </div>
          <div class="tips">请考生尽快注册！以免错过本期报考！</div>
        </div>
      </div>
    </div>

    <div class="content-1 center-content">
      <div class="content-1-child content-1-child-1">
        <img class="pointer" alt="成人教育，学历咨询"  :src="(crEducations.length && crEducations[0].img) || ''" @click="toArticleDetailLink(crEducations[0].imgDetail,crEducations[0].isUrl)"/>
      </div>
      <div class="content-1-child content-1-child-2">
        <div class="content-1-child-2-title margin-top-20 orange blod font20">
          <p class="font28">成功报名学生实时播报</p>
          <p class="margin-top-20"> 稍后会有教务老师尽快联系你，请保持电话畅通！</p>
        </div>
        <div class="content-1-child-2-content">
          <div ref="demo" id="demo">
            <ul ref="demo1" id="demo1">
              <li v-for="(s, index) in students" :key="'student'+index">
                <div class="content-1-child-2-student">{{s.name}}</div>
                <div class="content-1-child-2-student">{{s.mobile.substr(0,3)+'****'+s.mobile.substr(6,4)}}</div>
                <div class="content-1-child-2-student">{{s.school}}</div>
              </li>

            </ul>
            <div ref="demo2" id="demo2"></div>
          </div>
        </div>

      </div>
      <div class="content-1-child content-1-child-3">
        <el-form ref="regform" :model="regform" label-width="80px" v-show="pageType == 1">
          <p class="margin-top-20 font20">注册并登录，查看海量<label class="font16 blod orange">真题</label></p>
          <el-input type="number" class="form-input-select margin-top-10" autocomplete="off" v-model="regform.mobile" placeholder="请输入手机号"></el-input>
          <el-input type="password" class="form-input-select margin-top-10" autocomplete="off" v-model="regform.password" placeholder="请输入密码"></el-input>
          <el-input type="password" class="form-input-select margin-top-10" autocomplete="off" v-model="regform.repassword" placeholder="请再次输入密码"></el-input>
          <el-input class="form-input-select margin-top-10" autocomplete="off" v-model="regform.name" placeholder="请输入真实姓名"></el-input>
          <el-button style="width: 100%;"  class="form-input-select margin-top-10" @click.stop="register">注册</el-button>
          <p class="had-account">
            已有账号，<a class="orange pointer" @click="pageType = 2">前往登录</a>
          </p>
        </el-form>

        <div v-show="pageType == 2">
          <p class="margin-top-20 font20">注册并登录，查看海量<label class="blod orange">真题</label></p>
          <el-input type="mobile" name="mobile" class="form-input-select margin-top-20" autocomplete="off" v-model="loginform.mobile" placeholder="请输入手机号"></el-input>
          <el-input type="password" name="password" class="form-input-select margin-top-20" autocomplete="off" v-model="loginform.password" placeholder="请输入密码"></el-input>
          <el-button style="width: 100%;" class="margin-top-20" @click.stop="_login">登录</el-button>
          <p class="had-account">
            没有账号，<a class="orange pointer" @click="pageType = 1">前往注册</a>
          </p>
        </div>

        <div v-show="pageType == 3">
          <p class="margin-top-20 font24">亲爱的<label class="orange blod">{{username}}</label>，您已成功登录！</p>
          <p class="margin-top-20 font24">您可以点击导航栏</p>
          <p class="orange font28 margin-top-20 blod">“历年真题”</p>
          <p class="margin-top-20 font24">查看海量真题！</p>
          <p class="margin-top-20 ">您也可以点击下面的按钮查看</p>
          <el-button class="see-zhenti" type="success" plain @click="toZhenti()">立即查看</el-button>

          <p class="had-account">
            <a class="orange pointer" @click="exit">退出</a>
          </p>
        </div>
      </div>
    </div>

    <div class="content-2 center-content">
      <div class="title">
        <img alt="成人教育，学历咨询" src="../../assets/xx_menu.png"/>
        咨询报名学习
        <img alt="成人教育，学历咨询" src="../../assets/xx_menu2.png">
      </div>
      <div style="text-align: center;">
        <ul class="school-list">
          <li @click="toKefu()" @mouseover="active4Consutations = (''+index)" @mouseleave="active4Consutations = ''" v-for="(con,index) in consultations" :key="'con'+index">
            <img alt="成人教育，学历咨询" v-if="con.img" :src="active4Consutations === (''+index) ? (consultations1[index].img || '') : (con.img || '')"/>
          </li>
        </ul>
        <div class="margin-top-10">
          <el-button class="content-2-btn" type="danger" round @click="toKefu">更多院校,请点击咨询>></el-button>
        </div>

      </div>
    </div>

    <div class="content-3 center-content">
      <div class="left-content">
        <div class="top-content">
          <div class="top-left-content">
            <div class="font24 margin-top-10 black">上班族如何</div>
            <div class="font24 blod title-2"><label class="black">快速</label><label class="orange">提升学历？</label></div>
            <div class="grey-content">上班族修学历，你需要仔细了解。</div>
            <ul class="top-left-content-ul font20 blod">
              <li>
                <label class="orange">1.</label>
                <label class="black">轻松获取本科学历</label>
                <button class="search-btn float-right" @click="toKefu()">点击了解</button>
              </li>
              <li>
                <label class="orange">2.</label>
                <label class="black">免费定制学历提升方案</label>
                <button class="search-btn float-right" @click="toKefu()">点击了解</button>
              </li>
              <li>
                <label class="orange">3.</label>
                <label class="black">0基础专属报名入口</label>
                <button class="search-btn float-right" @click="toKefu()">点击了解</button>
              </li>
              <li>
                <label class="orange">4.</label>
                <label class="black">上班族专属报名入口</label>
                <button class="search-btn float-right" @click="toKefu()">点击了解</button>
              </li>
            </ul>
          </div>
          <div class="top-right-content">
            <div class="font24 margin-top-10 black">2019上半年</div>
            <div class="font24 blod title-2"><label class="black">成人学历</label><label class="orange">报考信息查询</label></div>
            <div class="top-right-ul" style="margin-top: 10px;">
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/tiaojian.png"/></div>
                <div class="li-text">报考条件</div>
              </div>
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/time.png"/></div>
                <div class="li-text">报名时间</div>
              </div>
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/liucheng.png"/></div>
                <div class="li-text">报考流程</div>
              </div>
            </div>
            <div class="top-right-ul">
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/rili.png"/></div>
                <div class="li-text">考试时间</div>
              </div>
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/text.png"/></div>
                <div class="li-text">考试科目</div>
              </div>
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/time1.png"/></div>
                <div class="li-text">取证时间</div>
              </div>
            </div>
            <div class="top-right-ul">
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/book.png"/></div>
                <div class="li-text">热门专业</div>
              </div>
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/school.png"/></div>
                <div class="li-text">热门院校</div>
              </div>
              <div class="li" @click="toKefu()">
                <div class="li-ico"><img alt="成人教育，学历咨询" src="../../assets/fee.png"/></div>
                <div class="li-text">报名费用</div>
              </div>
            </div>

          </div>
        </div>
        <div class="bottom-content">
          <div class="bottom-content-title">
            <img alt="成人教育，学历咨询" src="../../assets/kuai.png"/>
            <div class="title-text">
              <div>高校授权</div>
              <div>学习中心</div>
            </div>

            <div class="blod font28 margin-top-10" style="margin-bottom: 20px">
              <label class="black">如何快速报考</label><label class="orange">？</label>
              <label class="black">马上问我</label><label class="orange">！</label>
            </div>
            <div class="margin-top-20 black font16">国家承认，终身可查的四种正规继续教育学历类型(自考/远程/成考/电大)</div>
            <div class="margin-top-20 black font16">33所‘985/211工程’高等院校，超过109门招考专业如何选择？</div>
            <div class="margin-top-20 black font16">掌握窍门，选对学历，1.5年就能考取本科学历！</div>
            <div class="bottom-content-img-list margin-top-20">
              <img src="../../assets/bk1.jpg" alt="成人教育，学历咨询" class="pointer" @click="toKefu()"/>
              <img src="../../assets/bk2.jpg" alt="成人教育，学历咨询" class="pointer" @click="toKefu()"/>
              <img src="../../assets/bk3.jpg" alt="成人教育，学历咨询" class="pointer" @click="toKefu()"/>
            </div>
            <div class="font28 black blod margin-top-20">只有授权中心才敢有保障</div>
            <div class="font16 black margin-top-20">众多学员选择我们，不仅是我们做得好，更因为我们的责任。</div>
          </div>
        </div>
      </div>
      <div class="right-content">
        <div class="font24 margin-top-10 black">为什么</div>
        <div class="font24 blod title-2"><label class="black">你需要</label><label class="orange">一个学历？</label></div>
        <ul class="right-content-list">
          <li>
            <img src="../../assets/sz.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">升值加薪</div>
              <div class="font14 margin-top-10">高等学历是用人单位选举和提拔人才的重要考核标准，且工资、奖金更多。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/zc.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">职称评定</div>
              <div class="font14 margin-top-10">无学历必须有10年工资经验才能评助理职称，高等学历仅2年便可评定。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/xl3.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">考公务员</div>
              <div class="font14 margin-top-10">公务员稳定，待遇较高，压力较小。取得高等学历后，有条件报考公务员。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/xl3.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">考资格证</div>
              <div class="font14 margin-top-10">取得高等学历，可以考自己喜欢的职业资格证，如：心理咨询师、律师等。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/xl4.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">求职就业</div>
              <div class="font14 margin-top-10">好学历往往是好工资的敲门砖，考个本科学历，才能实现你的各方面的才能。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/xl5.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">考研究生</div>
              <div class="font14 margin-top-10">本科学历，可以直接考研，而专科只能在毕业满3-5年后以同等学历考研。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/xl3.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">个税减免</div>
              <div class="font14 margin-top-10">国家税收新政，针对在读继续教育学生可申请最高4000元个税减免。</div>
            </div>
          </li>
          <li>
            <img src="../../assets/xl6.jpg"/>
            <div class="img-content margin-top-10">
              <div class="orange margin-top-10 blod">出国留学</div>
              <div class="font14 margin-top-10">好学历往往是好工资的敲门砖，考个本科学历，才能实现你的各方面的才能。</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="content-4 margin-top-10 center-content" id="registerStudent">
      <div class="title">
        <img src="../../assets/xx_menu.png"/>
        在线报名
        <img src="../../assets/xx_menu2.png">
      </div>
      <div>
        <div class="content">
          <img class="content-ly2" src="../../assets/ly2.png"/>
          <ul class="content-4-form">
            <li>
              <el-select class="form-input-select" v-model="student.school" placeholder="请选择学校">
                <el-option
                  v-for="item in schools"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </li>
            <li>
              <el-select class="form-input-select" v-model="student.education" placeholder="请选择学历">
                <el-option
                  v-for="item in educations"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </li>
            <li>
              <el-input class="form-input-select" v-model="student.name" placeholder="请输入姓名"></el-input>
            </li>
            <li>
              <el-input class="form-input-select" v-model="student.mobile" placeholder="请输入手机号"></el-input>
            </li>
            <li>
              <el-button class="form-input-select form-btn" @click="addStudent">提交</el-button>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="content-5 margin-top-20 center-content">
      <div class="font24 black blod content-5-title">服务项目</div>
      <div class="font16 grey margin-top-10">OUR SERVICE</div>
      <ul class="service-list">
        <li @click="toKefu()" @mouseover="active4ServiceItems = (''+index)" @mouseleave="active4ServiceItems = ''" v-for="(con,index) in serviceItems" :key="'ser'+index">
          <img v-if="con.img" :src="active4ServiceItems === (''+index) ? (serviceItems1[index].img || '') : (con.img || '')"/>
        </li>
      </ul>
    </div>

    <div class="content-6 center-content">
      <div class="font24 black blod margin-top-20">通知公告</div>
      <div class="font16 black margin-top-10">NOTICE BULLETIN</div>
      <div class="content-6-btns">
        <button :class="ca.id == activeCategoryId ? 'active' : ''" @click="_getArticleList(ca.id)" v-for="ca in categoryList" :key="'category' + ca.id">{{ca.name}}</button>
      </div>
      <div class="content-6-bottom">
        <div class="content-6-left">
          <el-carousel :interval="5000" arrow="always" height="9.333333rem" class="content-6-carousel">
            <el-carousel-item v-for="(na,index) in noticeArticles" :key="'noticeArticles'+index">
              <div class="pointer" @click="toArticleDetailLink(na.id)">
                <img :src="na.cover">
                <div class="banner-des">
                  <div class="font24">{{na.title}}</div>
                  <div class="margin-top-10 font16 grey">{{na.introduction}}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content-6-right">
          <ul class="article-list" v-show="articleList.length">
            <li v-for="ar in articleList" class="pointer" :key="'article'+ ar.id" @click="toArticleDetailLink(ar.id)"> {{ar.title}}  </li>
          </ul>
          <div class="article-list" v-show="!articleList.length" style="text-align: center;">暂无数据~~</div>
        </div>
      </div>

    </div>
    <div class="content-7 margin-top-20 center-content">
      <div class="content-7-8-left">
        <el-carousel :interval="5000" arrow="always"  class="content-7-8-carousel">
          <el-carousel-item v-for="(banner,index) in bannerList1" :key="'banner1'+index">
            <h3 class="carousel-item pointer" @click="toArticleDetailLink(banner.imgDetail,banner.isUrl)">
              <img v-if="banner.img" :src="banner.img || ''"/>
            </h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="content-7-8-right">
        <ul class="content-7-8-little-img">
          <li v-for="(xtp,index) in xtpList1" class="pointer" :key="'xtp1'+index" @click="toArticleDetailLink(xtp.imgDetail,xtp.isUrl)">
            <img v-if="xtp.img" :src="xtp.img || ''"/>
          </li>
        </ul>
      </div>
    </div>
    <div class="content-7 margin-top-20 center-content">
      <div class="content-7-8-left">
        <el-carousel :interval="5000" arrow="always"  class="content-7-8-carousel">
          <el-carousel-item v-for="(banner,index) in bannerList2" :key="'banner2'+index">
            <h3 class="carousel-item pointer" @click="toArticleDetailLink(banner.imgDetail,banner.isUrl)">
              <img v-if="banner.img" alt="成人教育，学历咨询" :src="banner.img || ''"/>
            </h3>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="content-7-8-right">
        <ul class="content-7-8-little-img">
          <li v-for="(xtp,index) in xtpList2" class="pointer" :key="'xtp2'+index" @click="toArticleDetailLink(xtp.imgDetail,xtp.isUrl)">
            <img v-if="xtp.img" alt="成人教育，学历咨询" :src="xtp.img || ''"/>
          </li>
        </ul>
      </div>
    </div>

    <div class="content-9 margin-top-20 center-content">
      <div class="content-9-detail">
        <img alt="成人教育，学历咨询" :src="index.school_content_img" class="left-content"/>
        <div class="right-content">
          <div class="font24 blod black">关于重庆成人教育网</div>
          <div class="font16 black margin-top-10">ABOUT US</div>
          <div class="content margin-top-20" style="text-indent:30px;" v-html="index.school_content"></div>
          <i class="el-icon-video-play"></i>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import events from '../../libs/events'

  export default {
    components: {},
    data() {
      return {
        backgroundDiv: [],
        backgroundDiv4CrEdu: [],
        index: {},
        schools:[],
        educations: [],
        student: {
          name: '',
          school: '',
          education: '',
          mobile: ''
        },
        endDate:{
          month:new Date().getMonth() + 1,
          day: new Date().getDay()
        },
        articleList:[],
        categoryList:[],
        activeCategoryId:'',
        bannerList1:[],
        bannerList2:[],
        xtpList1:[],
        xtpList2:[],
        noticeArticles:[],
        bannerList:[],
        consultations:[],
        consultations1:[],
        active4Consutations:'',
        serviceItems:[],
        serviceItems1:[],
        crEducations:[],
        active4ServiceItems:'',
        monthInfo:'',
        regform:{},
        pageType: true,
        loginform:{},
        username:'',
        students:[]
      }
    },
    computed: {

    },
    created() {
      this._studentList()
      let myMar=setInterval(this.marquee,40);
    },
    mounted() {
      this._getIndexDetail()
      this._getStudentInfo()
      
      if(this.getQueryString('regPage') == 1){
        document.getElementById('registerStudent').scrollIntoView(false)
      }
      
    },
    destroyed() {

    },
    methods: {
      ...mapActions({
        getIndexDetail: 'index/indexDetail',
        getArticleList: 'article/getArticleList',
        getCategoryList: 'category/getCategoryList',
        createStudent:'student/createStudent',
        getListbyIds:'article/getListbyIds',
        login:'student/userLogin',
        getStudentInfo:'student/getStudentInfo',
        studentList: 'student/studentList'
      }),
      // 获取首页详情
      async _getIndexDetail() {
        let ret = await this.getIndexDetail({isLoading:false});
        this.index = ret;
        this.getCurrMonth()

        events.$emit('setLogo',this.index.logo);

        const end_date = new Date(ret.end_date)
        this.endDate.month = (end_date.getMonth()+1) > 9 ? (end_date.getMonth()+1) : '0' + (end_date.getMonth()+1)
        this.endDate.day = end_date.getDate() > 9 ? end_date.getDate() : '0' + end_date.getDate()
        this.bannerList1 = this.checkImgLink(this.index.img_model1.split('|'))
        this.bannerList2 = this.checkImgLink(this.index.img_model2.split('|'))
        this.xtpList1 = this.checkImgLink(this.index.xtp_model1.split('|'))
        this.xtpList2 = this.checkImgLink(this.index.xtp_model2.split('|'))
        this.schools = this.index.schools.split('|')
        this.educations = this.index.educations.split('|')
        this.bannerList = this.checkImgLink(this.index.banner.split('|'))
        this.backgroundDiv = this.bannerList.map(item => {
          return {background: 'url(' + item.img + ') no-repeat center / cover'}
        })
        this.crEducations = this.checkImgLink(this.index.cr_education.split('|'))
        this.backgroundDiv4CrEdu = this.crEducations.map(item => {
          return {background: 'url(' + item.img + ') no-repeat center / cover'}
        })

        this.consultations = this.checkImgLink(this.index.consultation.split('|'))
        this.consultations1 = this.checkImgLink(this.index.consultation_b.split('|'))
        this.serviceItems = this.checkImgLink(this.index.service_items.split('|'))
        this.serviceItems1 = this.checkImgLink(this.index.service_items_b.split('|'))

        let categoryRet = await  this.getCategoryList({parent_id:this.index.notice_category,isLoading:false})
        this.categoryList = categoryRet.data.data
        this._getArticleList(this.categoryList[0].id)
        let articleRet = await this.getListbyIds({ids:this.index.notice_article,isLoading:false})
        this.noticeArticles = articleRet.data.data
      },

      async _getStudentInfo(){
        this.pageType = 1
        let ret = await this.getStudentInfo({isLoading:false})
        this.pageType = 3
        this.username = ret.name
      },

      async _studentList(){
        let ret = await this.studentList({schoolNotNull:true,pageSize:100,isLoading:false})
        this.students = ret.data
      },

      getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
      },

      checkImgLink(list){
        return list.map(item => {
          let itemInfo = item.split('@')
          return {img: itemInfo[0], imgDetail: itemInfo[1], isUrl: itemInfo[2]}
        })
      },

      getCurrMonth(){
        const today = new Date()
        let m = today.getMonth() + 1

        if(m >= 10){
          this.monthInfo = (today.getFullYear()+1)+'年上半年'
        }else if(m <= 4){
          this.monthInfo = today.getFullYear()+'年上半年'
        }else{
          this.monthInfo = today.getFullYear()+'年下半年'
        }
      },

      toKefu(){
        window.open('https://tb.53kf.com/code/client/a1293458b14dcd6d39e891956593773f/1','_blank')
      },

      marquee(){
        let demo=this.$refs.demo;
        let demo2=this.$refs.demo2;
        let demo1=this.$refs.demo1;
        if(demo1 && demo && demo1.clientHeight && demo.clientHeight && demo1.clientHeight > demo.clientHeight){
          demo2.innerHTML = demo1.innerHTML;
          if(demo.scrollTop>=demo1.offsetHeight){
            demo.scrollTop=0;
          } else{
            demo.scrollTop=demo.scrollTop+1;
          }
        }
      },

      exit(){
        this.pageType = 2
        this.$ls.remove("USER_TOKEN");
      },

      async _login(){
        if(!this.loginform.mobile){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写手机号'
          });
          return
        }else if(!this.loginform.password){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写密码'
          });
          return
        }

        let ret = await this.login(this.loginform)
        this.$ls.set("USER_TOKEN", ret.token);
        const USER_TOKEN = this.$ls.get("USER_TOKEN");
        if (USER_TOKEN) {
          this.$notify({
            title: '成功',
            message: '登录成功！！',
            position: 'bottom-right',
            type: 'success'
          });

          this._getStudentInfo()
        }
      },

      /**判断是否是手机号**/
      isPhoneNumber(tel) {
        var reg =/^0?1[3|4|5|6|7|8][0-9]\d{8}$/;
        return reg.test(tel);
      },

      async register(){
        if(!this.regform.mobile){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写手机号'
          });
          return
        }else if(!this.isPhoneNumber(this.regform.mobile)){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '手机号格式不正确'
          });
          return
        }else if(!this.regform.password) {
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写密码'
          });
          return
        }else if(this.regform.repassword !== this.regform.password){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '两次输入的密码不一致'
          });
          return
        }else if(!this.regform.name) {
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写姓名'
          });
          return
        }

        let ret = await this.createStudent(this.regform)
        this.$notify({
          title: '成功',
          message: '注册成功！！',
          position: 'bottom-right',
          type: 'success'
        });
        this._studentList()
        this.pageType = 2
      },

      async addStudent(){
        if(!this.student.name){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写姓名'
          });
          return
        }else if(!this.student.mobile){
          this.$notify.error({
            title: '错误',
            position: 'bottom-right',
            message: '请填写手机号'
          });
          return
        }

        let ret = await this.createStudent(this.student)
        this.$notify({
          title: '成功',
          message: '申请已提交',
          position: 'bottom-right',
          type: 'success'
        });
        this._studentList()
      },

      async _getArticleList(categoryId){
        let page = 1
        this.activeCategoryId = categoryId
        let articleRet = await this.getArticleList({page,categoryId,isLoading:false})
        this.articleList = articleRet.data
      },

      toArticleDetailLink(id,isUrl) {
        if(!id) return;
        if(isUrl == 1){
          window.open(id,'_blank')
        }else{
          this.$router.push({path:'/article/detail/'+id,query: {categoryId:this.categoryId,curentCaId:this.curentCaId}});
        }
      },

      toZhenti(){
        this.$router.push({path:'/article/list/16'});
      }

    }
  }
</script>

<style lang="scss" scoped>
  $main-width:90%;
  $main-color: #e73e05;
  $main-width-4-big-screen: 70%;

  [v-cloak] {
    display:none;
  }

  .blod{
    font-weight: bold;
  }

  .orange{
    color: $main-color;
  }

  .black{
    color: #000;
  }

  .grey{
    color: #908d8d;
  }

  .font24{
    font-size: 24px;
  }

  .font20{
    font-size: 20px;
  }

  .font16{
    font-size: 16px;
  }

  .font14{
    font-size: 14px;
  }

  .font28{
    font-size: 28px;
  }

  .margin-top-10{
    margin-top: 10px;
  }

  .margin-top-20{
    margin-top: 20px;
  }

  .float-right{
    float: right;
  }

  .main{
    text-align: center;
  }

  .slide_container{
    position: relative;
    text-align: center;
  }

  .pointer{
    cursor: pointer;
  }

  .carousel-item{
    height: 100%;

    & img{
      width: 100%;
      height: 100%;
    }
  }

  .date-panel{
    position: absolute;
    width: 100%;
    top: 0;
  }

  .end-date-panel{
    width: 386px;
    height: 400px;
    position: absolute;
    top: 50px;
    right: 0px;
    background-color: rgba(253, 236, 228, 0.52);
    z-index: 2;
    text-align: center;

    & .title{
      font-size: 24px;
      color: #000;
      font-weight: bold;
      margin-top: 40px;
    }

    & .content{
      vertical-align: bottom;
      overflow: hidden;
      zoom: 1;
      margin-top: 50px;
      display: inline-block;

      & .yellow-panel{
        display: block;
        width: 90px;
        height: 90px;
        background: #e74f05;
        font-size: 54px;
        text-align: center;
        line-height: 90px;
        color: white;
        border-radius: 4px;
        float: left;
      }

      & .text{
        font-size: 30px;
        float: left;
        position: relative;
        top: 54px;
        margin-left: 5px;
      }
    }

    & .tips{
      font-size: 18px;
      color: #000;
      font-weight: bold;
      margin-top: 60px;
    }
  }

  .center-content{
    margin: auto;
    width: $main-width;

    @media (min-width: 1500px) {
      width: $main-width-4-big-screen;
    }
  }

  .content-1{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*overflow: hidden;*/
    /*display: inline-block;*/

    & .content-1-child{
      width: 480px;
      height: 450px;
      position: relative;
      text-align: center;
      padding: 0 10px;
      box-sizing: border-box;
      /*margin: 0 10px;*/
      display: inline-block;
      /*float: left;*/

      & .black-title{
        margin-top: 14px;
        color: #000;
        font-size: 24px;
        font-weight: bold;
      }

      & .red-title{
        margin-top: 10px;
        color: $main-color;
        font-size: 24px;
        padding-bottom: 14px;
        border-bottom: 1px solid #adadad;
        font-weight: bold;
      }

      & .grey-content{
        margin-top: 6px;
        font-size: 14px;
        color: #707070;
        margin-bottom: 10px;
      }

      & .img-content{
        position: absolute;
        left: 40px;
      }

      & .img-1{
        width: 300px;
        height: 188px;

        @media (min-width: 1500px) {
          width: 400px;
          height: 240px;
        }
      }

      & .img-2{
        width: 380px;
        height: 253px;

        @media (min-width: 1500px) {
          width: 480px;
          height: 320px;
        }
      }

      & .search-btn{
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        background: $main-color;
        color: #fff;
        position: absolute;
        bottom: 8px;
        width: 120px;
        margin-left: -60px;
        left: 50%;
        border: 0px;
        cursor: pointer;

        &:hover{
          background: #E73005;
        }
      }
    }

    & .content-1-child-1{
      /*background: url("../../assets/bj21.png") no-repeat;*/
      padding:0;

      & img{
        width: 100%;
        height: 100%;
      }

      & ul{
        list-style: none;
        margin: 0 auto;
        padding: 0;
        width: 300px;
        margin-top: 50px;

        @media (min-width: 1500px) {
          margin-top: 80px;
        }

        & li{
          cursor: pointer;
          background: rgba(255, 102, 0, 1);
          color: #fff;
          height: 50px;
          line-height: 50px;
          border-radius: 20px;
          margin-top: 20px;
          text-align: center;

          &:hover{
            background: #E73005;
          }
        }
      }
    }

    & .content-1-child-2{
      background: #d60909;
      width: calc(100% - 1000px);

      & .content-1-child-2-title{
        height: 120px;
        color: #fff;
      }

      & .content-1-child-2-content{
        height: calc(100% - 140px);
        overflow: hidden;

        & #demo{
          overflow:hidden;
          height:100%;
          width:100%;
          margin: auto;
          position:relative;
        }
        & #demo1{
          height:auto;
          text-align:left;
        }
        & #demo2{
          height:auto;
          text-align:left;
        }
        #demo1 li, #demo2 li{
          list-style-type:none;
          height:60px;
          text-align:left;
          font-size: 20px;
          overflow: hidden;

          & .content-1-child-2-student{
            display: block;
            box-sizing: border-box;
            width: 33.333333%;
            float: left;
            text-align: center;
            border-right: 2px solid #d60909;
            border-bottom: 2px solid #d60909;
            background: #fff;
            color: #d60909;
            height: 60px;
            line-height: 60px;
            font-weight: bold;
          }
        }
      }


    }

    & .content-1-child-3{
      background: #236ba9;
      color: #fff;
      /*background-size: cover;*/
      padding: 0px 20px;
      position: relative;

      & .see-zhenti{
        margin-top: 30px;
      }

      & .had-account{
        right: 20px;
        position: absolute;
        bottom: 20px;

        & a{
          border-bottom: 1px solid $main-color;
        }
      }

      & .grey-content{
        text-align: left;
      }

      & .search-btn{
        margin-left: 0;
        left: 20px;
        bottom: 80px;
      }

      & .img-content{
        left: 0px;
        bottom: 0px;
      }
    }
  }

  .content-2{
    margin-top: 20px;
    background: url("../../assets/xx_bg.jpg") no-repeat;
    height: 580px;
    text-align: center;

    & .title{
      display: inline-block;
      color: #fff;
      font-weight: bold;
      font-size: 30px;
      margin-top: 40px;
    }

    & .content-2-btn{
      width: 600px;
    }

    & .school-list{
      overflow: hidden;
      margin: 20px auto;
      display: inline-block;

      & li{
        cursor: pointer;
        float: left;
        margin: 0 4px;

        & img{
          width: 240px;
          height: 350px;
        }
      }
    }
  }

  .content-3{
    margin-top: 10px;
    overflow: hidden;
    zoom: 1;
    display: inline-block;


    & .search-btn{
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      background: $main-color;
      color: #fff;
      width: 100px;
      border: 0px;
      cursor: pointer;

      &:hover{
        background: #E73005;
      }
    }

    & .title-2{
      padding-bottom: 10px;
      border-bottom: 1px solid #adadad;
    }

    & .left-content{
      width: calc(60% - 20px);
      float: left;

      & .top-content{
        height: 547px;
        overflow: hidden;
        zoom: 1;

        @media (min-width: 1500px) {
          height: 480px;
        }

        & .top-left-content{
          width: 45%;
          float: left;
          height: 100%;
          background: rgba(255, 238, 229, 0.75);
          padding: 0 10px;
          box-sizing: border-box;

          & .grey-content{
            margin-top: 15px;
            font-size: 16px;
            color: #707070;
            margin-bottom: 10px;
          }

          & .top-left-content-ul{
            margin-top: 40px;

            & li{
              height: 60px;
              line-height: 60px;
              margin-top: 20px;
              text-align: left;
              overflow: hidden;
              zoom: 1;
            }
          }
        }
        & .top-right-content{
          width: 55%;
          float: right;
          height: 100%;
          box-sizing: border-box;
          padding: 0px 10px;
          background: rgba(248, 248, 248, 1);

          & .top-right-ul{
            display: inline-block;

            & .li{
              background: #fff;
              border: 1px solid #eee;
              box-shadow: 0 0 5px #d6d6d6;
              height: 110px;
              width: 130px;
              display: inline-block;
              margin: 8px 10px;
              cursor: pointer;

              @media (min-width: 1500px) {
                height: 110px;
                width: 150px;
              }

              & .li-ico{
                margin-top: 10px;

                & img{
                  width: 32px;
                  height: 32px;
                }
              }

              & .li-text{
                margin-top: 4px;
                font-size: 16px;
                color: #000;
              }

              &:hover{
                background: #eee;
              }
            }
          }
        }
      }

      & .bottom-content{
        height: 653px;
        margin-top: 10px;
        background: rgba(248, 248, 248, 1);

        & .bottom-content-title{
          position: relative;

          .title-text{
            position: absolute;
            width: 88px;
            margin-left: -44px;
            left: 50%;
            color: #fff;
            font-size: 16px;
            top: 4px;
            font-weight: bold;
          }
        }

        & .bottom-content-img-list{
          overflow: hidden;
          zoom: 1;
          display: inline-block;

          & img{
            float: left;
            width: 266px;
            height: 151px;
            margin: 0px 5px;
          }
        }
      }
    }

    & .right-content{
      width: 40%;
      float: right;
      margin-left: 20px;
      height: 1200px;
      background: rgba(254, 250, 255, 1);

      & .right-content-list{
        overflow: hidden;
        zoom: 1;

        & li{
          width: 49%;
          height: 260px;
          margin-top: 10px;
          overflow: hidden;
          font-size: 20px;
          box-sizing: border-box;

          & img{
            width: 100%;
          }

          & .img-content{
            text-align: left;
            color: #908d8d;
          }
        }

        & li:nth-child(2n + 1){
          float: left;
        }

        & li:nth-child(2n){
          float: right;
        }
      }
    }
  }

  .content-4{
    height: 570px;
    background: url("../../assets/ly.jpg") no-repeat center;
    position: relative;

    & .title{
      display: inline-block;
      color: #fff;
      font-weight: bold;
      font-size: 30px;
      margin-top: 40px;
    }

    & .content{
      display: inline-block;
      overflow: hidden;
      zoom: 1;
      margin-top: 20px;

      & .content-ly2{
        width: 604px;
        height: 425px;
        float: left;
      }

      & .content-4-form{
        float: left;
        margin-left: 100px;

        & li{
          margin-top: 20px;
        }

        & .form-input-select{
          width: 500px;
        }

        & .form-btn{
          background: black;
          color: #fff;
          border: 0;
        }
      }
    }
  }

  .content-5{
    background: rgba(234, 234, 234, 1);
    height: 600px;
    padding-top: 50px;

    & .service-list{
      overflow: hidden;
      zoom: 1;
      display: inline-block;
      margin-top: 50px;

      & li{
        float: left;
        margin: 0 30px;
        cursor: pointer;

        & img{
          width: 300px;
          height: 410px;
        }
      }
    }
  }

  .content-6{
    text-align: left;
    margin-top: 20px;
    padding: 20px 0px;

    & .content-6-btns{
      text-align: right;

      & button{
        margin-left: 20px;
        width: 120px;
        height: 40px;
        line-height: 40px;
        background: #fff;
        color: $main-color;
        border: 1px solid #aaa;
        cursor: pointer;
      }

      & button.active,& button:hover{
        background: $main-color;
        border: 1px solid $main-color;
        color: #fff;
      }
    }

    & .content-6-bottom{
      height: 700px;
      overflow: hidden;

      & .content-6-left{
        height: 100%;
        overflow: hidden;
        width: 600px;
        float: left;

        & .content-6-carousel{

          & img{
            width: 100%;
          }
        }
      }

      & .content-6-right{
        width: calc(100% - 700px);
        float: right;

        & .article-list{

          & li{
            height: 60px;
            line-height: 60px;
            color: #666;
            border-bottom: 1px solid #ccc;
            font-size: 24px;
            cursor: pointer;
            width: 100%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }

          & li:hover{
            color: $main-color;
            border-bottom: 1px solid $main-color;
          }
        }
      }
    }
  }

  .content-7-8-left{
    float: left;
    width: 75%;
  }
  .content-7-8-right{
    float: right;
    width: 22%;
    height: 450px;

    & .content-7-8-little-img{
      height: 100%;

      & li{
        height: 33.3333%;
        text-align: right;

        & img{
          width: 316px;
          height: 112px;
        }
      }

      & li:first-child{
        margin-top: 0px;
      }
    }
  }

  .content-7-8-carousel{
    height: 450px;
  }

  .content-7{
    overflow: hidden;
    zoom: 1;
    height: 450px;
  }

  .content-9{
    height: 600px;
    background: url("../../assets/jj_bg1.jpg") no-repeat;
    position: relative;

    & .content-9-detail{
      display: inline-block;
      height: 100%;
      overflow: hidden;
      zoom: 1;
      width: 100%;

      & .left-content{
        width: 50%;
        height: 100%;
        float: left;
      }

      & .right-content{
        width: 50%;
        height: 100%;
        float: right;
        padding: 30px 30px;
        background: #fff;
        text-align: left;
        box-sizing: border-box;
        position: relative;

        .content{
          line-height: 40px;
        }

        .el-icon-video-play{
          color: #5c5c5c;
          position: absolute;
          font-size: 60px;
          right: 50px;
          bottom: 50px;
        }
      }

    }
  }
</style>
<style>
  .v-note-wrapper .v-note-panel {
    box-shadow: none !important;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    background: #fff !important;
  }

  .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper .content-input-wrapper {
    padding: 0 !important;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    padding: 0 !important;
  }
</style>

